<template>
  <a-modal ref="dialogHighLightRef" v-model:open="dialogVisible" title="导入高亮数据(json)" @cancel="handleClose()" width="60%">
    <div style="padding: 0px 5px; height: 450px; overflow-y: scroll">
      <a-textarea v-model:value="highLightStr" placeholder="" :rows="20" />
    </div>
    <template #footer>
      <a-button @click="handleClose">取 消</a-button>
      <a-button type="primary" @click="handleSubmit">确 定</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, defineExpose, unref, defineEmits } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const dialogVisible = ref(false);
  const highLightStr = ref('');
  // 定义外部事件
  const emits = defineEmits(['on-submit']);
  // 显示，由父组件调用
  const show = () => {
    dialogVisible.value = true;
  };

  // 处理确定按钮事件
  const handleSubmit = () => {
    if (unref(highLightStr)) {
      emits('on-submit', unref(highLightStr));
      dialogVisible.value = false;
    } else {
      createMessage.error('导入数据不能为空');
    }
  };
  const handleClose = () => {
    dialogVisible.value = false;
    highLightStr.value = '';
  };
  defineExpose({
    show,
  });
</script>
